import {Button, Divider, Dropdown, Menu, MenuProps, Space} from "antd";
import React, {useState} from "react";
import {DownloadOutlined, SmileOutlined} from "@ant-design/icons";

function CcDropdown(){

    const options:MenuProps["items"] = [
        {
            label:"111",
            key:"key111",
            extra:"##p"
        },
        {
            type:"divider"
        },
        {
            label:"222",
            key:"key222",
            icon:<SmileOutlined/>,
            disabled:true,
        },
        {
            label:"222",
            key:"key222",
            icon:<SmileOutlined/>,
            danger:true,
            extra: "⌘S"
        }
    ]

    const handleMenuClick = (e)=>{
        console.log("menu click",e)
    }

    const handleClick = (e)=>{
        console.log("click",e)
    }

    const menu = (
        <Menu
            items={options}
            onClick={(info) => {
                console.log('Menu item clicked:', info);
            }}
            style={{boxShadow:"none"}}
        />
    );

    const contentStyle: React.CSSProperties = {
        backgroundColor: "#fff",
        borderRadius:"20px",
        boxShadow:"0 4px 6px rgba(0, 0, 0, 0.2)"
    };

    const [open, setOpen] = useState(false)

    const handleOpenChange = (nextOpen,info)=>{
        console.log("open change",nextOpen,info)
        if (info.source==="trigger" || nextOpen){
            setOpen(nextOpen)
        }
    }

    return (
        <div style={{
            paddingTop:"100px"
        }}>
            {/*<Dropdown menu={{items:options}} placement="top" arrow={{pointAtCenter:true}} trigger={["click"]}>*/}
            {/*    <DownloadOutlined></DownloadOutlined>*/}
            {/*</Dropdown>*/}



            {/*<Dropdown.Button menu={{*/}
            {/*    items:options,*/}
            {/*    onClick:handleMenuClick*/}
            {/*}} onClick={handleClick}>dropdown</Dropdown.Button>*/}


            <Dropdown menu={{items:options}}

            dropdownRender={(menuNode)=>(
                        <div style={contentStyle}>
                            {
                                React.cloneElement(menuNode,{style:{boxShadow:"none"}})
                            }
                            <Divider style={{margin:0}}></Divider>
                            <Space>
                                <Button type="primary">click me</Button>

                            </Space>
                        </div>
            )}
            >hehe</Dropdown>


            <Dropdown
                dropdownRender={() => (
                    <div style={contentStyle}>
                        {menu}
                        <Divider style={{ margin: 0 }} />
                        <div style={{ padding: 8 }}>
                            <Button type="primary" block onClick={() => console.log('Button clicked')}>
                                Click Me
                            </Button>
                        </div>
                    </div>
                )}
            >
                <a onClick={(e) => e.preventDefault()}>Hehe</a>
            </Dropdown>


            <Dropdown menu={{items:options}} onOpenChange={handleOpenChange} open={false}>
waterkid
            </Dropdown>


            <Dropdown.Button
                type="primary" loading menu={{items:options,defaultSelectedKeys:['key111'],selectable:true}}>button</Dropdown.Button>


            <Dropdown menu={{items:options}} trigger={["contextMenu"]}>
                <div>
                    right click on h
                </div>
            </Dropdown>

        </div>
    )
}

export default CcDropdown
